<template>
  <div class='container'>
    <el-row type="flex" justify="space-between">
      <span style="font-size:12px;color:#ffc0cb">说明：目前支持学科和关键字条件筛选</span>
       <el-button :span="6" type="success" size='medium ' icon="EditPen" @click="$router.push('/questions/new')">新增试题</el-button>
    </el-row>
    <el-form label-position="right" label-width="80px" :data="formData" style="margin-top:10px">
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select placeholder="请选择" style="width:100%" v-model="form.subjectID" @change="changeTwo">
              <el-option v-for="item in subject" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select placeholder="请选择" style="width:100%"  v-model="form.catalogID" @change="changeTag"
            :clearable="isSubject">
              <el-option v-for="item in directory" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select placeholder="请选择" style="width:100%" v-model="form.tags" :clearable="isSubject">
              <el-option v-for="item in tagNames" :key="item.value" :value="item.id" :label="item.tagName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input placeholder="根据题干搜索" v-model="form.keyword"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <el-form-item label="试题类型" >
            <el-select placeholder="请选择" style="width:100%" v-model="form.questionType">
              <el-option v-for="item in formData.questionType" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" >
            <el-select placeholder="请选择" style="width:100%" v-model="form.difficulty">
              <el-option v-for="item in formData.difficulty" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span="6">
          <el-form-item label="方向" >
            <el-select placeholder="请选择" style="width:100%" v-model="form.direction">
              <el-option v-for="item in formData.direction" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" >
            <el-select placeholder="请选择" style="width:100%" v-model="form.creatorID">
              <el-option v-for="item in formData.creator" :key="item.id" :value="item.id" :label="item.username"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" style="font-weight: 800;">
              <el-select placeholder="请选择" v-model="form.province" style="width:100px">
                <el-option v-for="item in newList" :key="item" :value="item" :label="item"></el-option>
              </el-select>
              <el-select placeholder="请选择" v-model="form.city" style="width:100px;margin-left: 5px;">
                <el-option v-for="item in cityssss" :key="item" :value="item" :label="item"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div style="float:right">
            <el-button @click="resetFrom">清除</el-button>
            <el-button type="primary" @click="refer">搜索</el-button>
          </div>
          </el-col>
      </el-row>
    </el-form>
    <el-alert :title="`数据一共 ${total} 条`" icon="el-icon-info" show-icon type="info" :closable="false"></el-alert>
    <el-table
    :data="list"
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="120px">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="180px">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="180px">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="180px">
      <template #default="{row}">
        {{row.questionType == 1?'单选':row.questionType == 2? '多选':'简答'}}
      </template>
    </el-table-column>
    <el-table-column
      label="题干"
      width="280px">
      <template #default="{row}">
        <p v-html="row.question"></p>
      </template>
    </el-table-column>
    <el-table-column
      label="录入时间"
      width="180px">
      <template #default="{row}">
        {{ toDay(row.addDate) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="180px">
      <template #default="{row}">
        {{row.difficulty == 1?'简单':row.difficulty == 2? '一般':'困难'}}
      </template>
    </el-table-column>
    <el-table-column
      label="录入人"
      prop="creator"
      width="180px">
    </el-table-column>
    <el-table-column
      label="操作"
      width="180px">
      <template v-slot="{row}">
        <el-button type="primary" icon="View" plain circle size="small" title="预览" @click="preview(row)"></el-button>
        <el-button type="success" icon="edit" plain circle size="small" title="编辑" @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
        <el-button type="danger" icon="delete" plain circle size="small" title="删除" @click="delFn(row.id)">
        </el-button>
        <el-button type="warning" icon="check" plain circle size="small" title="加入精选" @click="enterFn(row)"></el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-row type="flex" class="row-bg footer" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="form.page"
        :page-sizes="[ 2, 5, 10, 20]"
        :page-size="form.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total">
      </el-pagination>
    </el-row>
    <!-- 预览 -->
    <el-dialog
    v-model:visible="showDialog"
    title="预览">
      <QuestionsPreview v-if="showDialog" :PreviewId="PreviewId"/>
    </el-dialog>
  </div>

      <!-- 预览弹出框 -->
      <el-dialog
    v-model="dialogVisible"
    title="题目预览"
    width="60%"
    :before-close="handleClose"
    align-center
    >
  <!-- 组件引入 -->
      <previewDialog :itemList="itemList"></previewDialog>
      <el-row class="dialog-footer" type="flex" justify="end">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </el-row>
  </el-dialog>
</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces } from '@/api/hmmm/citys'
import previewDialog from '../components/questions-preview.vue'
import { simple } from '@/api/hmmm/subjects'
import { simple as simples } from '@/api/hmmm/directorys'
import { simple as simplesd } from '@/api/base/users'
import { list as listTag } from '@/api/hmmm/tags'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import { nextTick } from 'vue-demi'
export default {
  components: {
    previewDialog
  },
  data () {
    return {
      itemList:{}, //弹窗里的数据
      dialogVisible:false, //预览弹窗的开关
      PreviewId: '',
      showDialog: false,
      isShow: false,
      isSubject: false,
      isPublishState: false,
      total: 0,
      list: [],
      subject: [],
      directory: [],
      tagNames: [],
      formData: {
        subject: [], // 学科
        catalog: [], // 目录
        tags: [],
        keyword: '',
        questionType: questionType,
        difficulty: difficulty,
        direction: direction,
        creator: [],
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      form: {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        page: 1,
        pagesize: 4,
        chkState: null
      },
      newList: provinces(),
      cityssss: ''
    }
  },
  created () {
    this.loading()
    this.loadSubject()
    this.loadingUser()
  },
  methods: {
    async loadingUser(){
      let arr =  await simplesd()
      this.formData.creator = arr.data
    },
    // // 学科目录
    async loadSubject () {
      const { data } = await simple()
      // console.log(data)
      this.subject = data
    },
    // 二级目录
    async changeTwo (value) {
      this.form.catalogID = null
      const { data: items } = await simples({ subjectID: value })
      // console.log(items)
      this.directory = items
    },
    // 标签
    async changeTag () {
      const res = await listTag({ subjectID: this.form.subjectID })
      console.log(res)
      this.tagNames = res.data.items
      // console.log(this.tagNames)
      // this.tagNames = null
    },

    // 修改时间
    toDay (data) {
      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    },
    // 重置表单
    resetFrom () {
      // 遍历fromList,把page和pagesize以外的值全部赋值为空
      Object.keys(this.form).forEach(item => { if (item !== 'page' && item !== 'pagesize') this.form[item] = null })
    },
    // 搜索按钮
    async refer () {
      try {
        const { data: res } = await list(this.form)
        console.log('Choice', res)
        this.list = res.items
        this.total = res.counts
        // 保存数据
      } catch (err) {
        console.log('Choice', err)
      }
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      this.form.page = 1
      this.loading()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.form.page = val
      this.loading()
    },
    // 枚举
    difficulty (id) {
      if (id) {
        return difficulty.find(item => item.value === +id).label
      }
      return ''
    },
    questionType (id) {
      if (id) {
        return questionType.find(item => item.value === +id).label
      }
      return ''
    },
    // 渲染题库列表数据
    async loading () {
      try {
        const { data: res } = await list(this.form)
        console.log('Choice', res)
        this.list = res.items
        this.total = res.counts
        // 保存数据
      } catch (err) {
        console.log('Choice', err)
      }
    },
    // 删除数据
    // 删除
    async delFn (id) {
      ElMessageBox.confirm('此操作将永久删除该题目' + ', 是否继续?', '提示', { type: 'warning' }).then(() => {
        remove({ id })
          .then((response) => {
            ElMessage.success('删除成功' + '!')
            this.loading()
          })
      }).catch(() => {})
    },
    // 加入精选
    async enterFn (row) {
      console.log(row);
      ElMessageBox.confirm('此操作将加入精选' + ', 是否继续?', '提示', { type: 'info' }).then(() => {
        choiceAdd({ id:row.id,choiceState:1})
          .then((response) => {
            ElMessage.success('添加精选成功' + '!')
            this.loading()
          })
      }).catch(() => {})
    },

    // 预览
    async preview(row) {
      this.dialogVisible = true
      const { data } = await detail(row)
      Object.assign(this.itemList, data)
      console.log(this.itemList);

    },
    handleClose () {
      this.dialogVisible = false
    }

  },
  // 完成审核渲染
  handleClick (tab, event) {
    if (tab.name === 'All') {
      this.form.chkState = null
    } else {
      this.form.chkState = tab.name
    }
    this.loading()
  }
}

</script>

<style scoped lang='scss'>
.container {
  margin: 15px 15px;
  background-color: #fff;
  padding: 15px 15px;
  .row-bg{
    display: flex;
    justify-content: flex-end;
  }
  .head{
      margin-bottom:15px;
    }
  .footer{
    margin-top: 20px;
  }
  .row-bg{
    .el-button{
      span{
        font-size: 12px;
      }
    }
    .explain{
    color: #ffc0cb;
    font-size: 12px;
    }
  }
}
  .el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-pagination__jump{
  margin: 0;
}
</style>
